<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
      :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="拼团名称" prop="collageName">
              <el-input v-model="queryParams.collageName" placeholder="请输入拼团名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="拼团编码" prop="collageCode">
              <el-input v-model="queryParams.collageCode" placeholder="请输入拼团编码" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="玩法" prop="playWay">
              <el-select v-model="queryParams.playWay" placeholder="请选择玩法" clearable @keyup.enter="handleQuery">
                <el-option v-for="dict in collage_play_way" :key="dict.value" :value="dict.value" :label="dict.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模块" prop="collageModule">
              <el-select v-model="queryParams.collageModule" placeholder="请选择模块" clearable @keyup.enter="handleQuery">
                <el-option v-for="dict in collage_module" :key="dict.value" :value="dict.value" :label="dict.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>
    <el-card shadow="never">
      <div style="margin-top: -15px;">
        <el-tabs v-model="queryParams.liveReportStatus" type="card" @tab-change="handleQuery">
          <el-tab-pane label="全部" name=''></el-tab-pane>
          <el-tab-pane v-for="(dict, index) in live_report_status" :key="index" :label="dict.label"
            :name="dict.value"></el-tab-pane>
        </el-tabs>
      </div>
      <el-table v-loading="loading" :data="cardCollageList" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="30" align="center" />
        <el-table-column label="主键" align="center" prop="id" v-if="false" />
        <el-table-column label="拼团封面" align="center">
          <template #default="scope">
            <image-preview :src="scope.row.imagePath" width="100px" height="80px"></image-preview>
          </template>
        </el-table-column>
        <el-table-column label="拼团名称" align="center" prop="collageName" />
        <el-table-column label="拼团编码" align="center" prop="collageCode" />
        <el-table-column label="组队方式" align="center" prop="playWay" width="180">
          <template #default="scope">
            <dict-tag v-if="scope.row.collageModule != '3'" :options="collage_play_way" :value="scope.row.playWay" />
            <el-tag v-else type="warning">福盒</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="拼团状态" align="center" prop="collageStatus">
          <template #default="scope">
            <dict-tag :options="live_report_status" :value="scope.row.liveReportStatus" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding" fixed="right">
          <template #default="scope">
            <div style="margin-top: 5px">
              <el-button type="text" icon="el-icon-view"
                v-if="scope.row.liveReportStatus == '3' || scope.row.liveReportStatus == '4'"
                @click="viewLivePlayback(scope.row)">
                直播回放
              </el-button>
            </div>
            <div style="margin-top: 5px">
              <el-button type="text" icon="el-icon-view" v-if="scope.row.liveReportStatus == '3'"
                @click="uploadOpenAddOn(scope.row)">
                上传拆卡报告
              </el-button>
            </div>
            <div style="margin-top: 5px">
              <el-button type="text" icon="el-icon-view" v-if="scope.row.liveReportStatus == '4'"
                @click="viewRepor(scope.row)">
                查看拆卡报告
              </el-button>
            </div>
            <div style="margin-top: 5px">
              <el-button type="text" icon="el-icon-view" v-if="scope.row.liveReportStatus == '4'"
                @click="openAddOn(scope.row)">
                追加拆卡报告
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
  </div>

  <el-dialog title="直播回放" v-model="openLiveBack.visible" append-to-body width="50%"
    @close="openLiveBack.visible = false" :destroy-on-close="true">
    <div>
      <video style="width: 100%; height: 400px;" controls :src="videoUrl" autoplay></video>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="openLiveBack.visible = false">关 闭</el-button>
    </div>
  </el-dialog>

  <el-dialog :title=viewOpenReport.title v-model="viewOpenReport.visible" append-to-body width="80%" @close="() => {
    viewOpenReport.visible = false; chooseCarmiList = [];
  }" :destroy-on-close="true">
    <div style="margin-bottom: 10px;">
      <el-button type="primary" @click="openThirdDia" v-if="editUpload || addUpload">
        增加卡密
      </el-button>
    </div>
    <div>
      <el-table v-loading="reportLoading" :data="openLiveList" @selection-change="handleSelectionChange" border>
        <el-table-column label="卡密" align="center" prop="carmiInfo" width="500" />
        <el-table-column label="上传正面" align="center">
          <template #default="scope">
            <image-preview :src="scope.row.frontImagePath" width="100px" height="100px"
              v-if="!(addUpload || editUpload)"></image-preview>
            <image-upload :limit="1" v-if="editUpload" v-model="scope.row.frontImagePath" />
            <uploadFront v-if="addUpload" v-model="scope.row.frontImagePath"
              @change="changeRow(scope.row, 0, scope.$index)" @del="changeAndDelete(scope.row, 0, scope.$index)" />
          </template>
        </el-table-column>
        <el-table-column label="上传背面" align="center">
          <template #default="scope">
            <image-preview v-if="!(addUpload || editUpload)" :src="scope.row.reverseImagePath" width="100px"
              height="100px"></image-preview>
            <image-upload :limit="1" v-if="editUpload" v-model="scope.row.reverseImagePath" />
            <uploadFront v-if="addUpload" v-model="scope.row.reverseImagePath"
              @change="changeRow(scope.row, 1, scope.$index)" @del="changeAndDelete(scope.row, 1, scope.$index)" />
          </template>
        </el-table-column>
        <el-table-column prop="currentNiceCard" label="设置好卡" header-align="center" width="100">
          <template #default="scope">
            <el-form-item label-width="20" :prop="'carmiList.' + scope.$index + '.currentNiceCard'">
              <el-checkbox true-label="1" false-label="0"
                :disabled="!(scope.row.frontImagePath && scope.row.reverseImagePath) || !addUpload"
                @change="changeAndDelete(scope.row, 3, scope.$index)" v-model="scope.row.currentNiceCard">是
              </el-checkbox>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="130">
          <template #default="scope">
            <div style="margin-bottom: 15px; margin-left: -20px;">
              <el-button type="text" icon="el-icon-view" @click="recallCarmi(scope.row)"
                v-if="Number(scope.row.reportStatus) == 1 && !editUpload">
                撤回
              </el-button>
              <el-button type="text" icon="el-icon-view"
                v-if="Number(scope.row.reportStatus) !== 1 && (addUpload || editUpload)"
                @click="deletAppendCarmi(scope.row, scope.$index)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="reportTotal > 0" :total="reportTotal" v-model:page="reportQueryParams.pageNum"
        v-model:limit="reportQueryParams.pageSize" @pagination="getViewOpenReport" />
    </div>
    <div slot="footer" class="dialog-footer" style="margin-top: 10px;">
      <el-button v-if="(addUpload || editUpload) && getChangeReport()" :disabled="!openLiveList.length" type="danger"
        @click="viewReportDia">预览{{ addUpload ? '' : '追加的' }}拆卡报告
      </el-button>
      <!-- <el-button v-show="addUpload" :loading="buttonLoading" type="primary" @click="generateReport">生成拆卡报告
      </el-button> -->
      <el-button @click="viewOpenReport.visible = false">关 闭</el-button>
    </div>
  </el-dialog>

  <el-dialog :title="`${addUpload ? '添加' : '追加'}中卡卡密`" v-model="thirdDia.visible" append-to-body width="80%"
    :destroy-on-close="true" @close="canclethirdDia">
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="已选的卡密" name="1">
          <div>
            <el-table :data="chooseCarmiList" border>
              <el-table-column label="卡密" align="center" prop="carmiInfo" />
              <el-table-column label="操作" align="center" width="200">
                <template #default="scope">
                  <el-button link type="primary" v-if="scope.row.reportStatus !== '1'"
                    @click="delReportChooseCarmi(scope.row, scope.$index)">移除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-divider style="font-weight:bold; margin-top: 10px;" content-position="left">未选卡密</el-divider>
    <div style="margin-top: 5px;">
      <el-form :model="queryCarmiParams" :inline="true">
        <el-form-item label="卡密信息" prop="filterInfo">
          <el-input v-model="queryCarmiParams.filterInfo" placeholder="请输入卡密信息" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getCarmiInfo">搜 索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="carmiList" v-loading="carmiLoading" @selection-change="handleSelectionChange" border>
        <el-table-column label="卡密" align="center" prop="carmiInfo" />
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button link type="primary" @click="addReportChooseCarmi(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="carmiTotal > 0" :total="carmiTotal" v-model:page="queryCarmiParams.pageNum"
        v-model:limit="queryCarmiParams.pageSize" @pagination="()=>{getCarmiInfo()
        }" />
    </div>
    <div slot="footer" class="dialog-footer" style="margin-top: 10px;">
      <el-button type="primary" @click="successCarmi">确 定</el-button>
      <el-button @click="canclethirdDia">取 消</el-button>
    </div>
  </el-dialog>

  <el-dialog :title="`预览${addUpload ? '' : '追加的'}拆卡报告`" v-model="viewAppendReport.visible" append-to-body width="80%"
    @close="viewAppendReport.visible = false" :destroy-on-close="true">
    <el-table :data="viewAppendReportList" border>
      <el-table-column label="卡密" align="center" prop="carmiInfo" width="500" />
      <el-table-column label="上传正面" align="center">
        <template #default="scope">
          <image-preview :src="scope.row.frontImagePath" width="100px" height="100px"></image-preview>
        </template>
      </el-table-column>
      <el-table-column label="上传背面" align="center">
        <template #default="scope">
          <image-preview :src="scope.row.reverseImagePath" width="100px" height="100px"></image-preview>
        </template>
      </el-table-column>
      <el-table-column prop="currentNiceCard" label="是否好卡" header-align="center" width="100">
        <template #default="scope">
          <el-form-item label-width="20" :prop="'carmiList.' + scope.$index + '.currentNiceCard'">
            <el-checkbox true-label="1" false-label="0" v-model="scope.row.currentNiceCard" :disabled=true>是
            </el-checkbox>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer" style="margin-top: 10px; float: right">
      <el-button type="primary" @click="addAppendOpenReport">生 成</el-button>
      <el-button @click="viewAppendReport.visible = false">取 消</el-button>
    </div>
  </el-dialog>

</template>

<script setup lang="ts">
import {
  queryOpenCardCollageList,
  resetLive,
  endLive, addReportImagePath, deleteImagePath,
  deleteOpenReport, viewOpenReportInfo, getCarmiByCollageIdInfo, appendOpenReport, openReportSave
} from '@/api/system/liveReport';
import { CardCollageVO, CardOpenReportVo } from '@/api/system/cardCollage/types';
import { CarmiFormat } from '@/api/system/carmi/types';
import uploadFront from '@/components/uploadFront/index.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { collage_play_way, live_report_status, collage_module } = toRefs<any>(proxy?.useDict('collage_play_way', 'live_report_status', 'collage_module'));
const cardCollageList = ref<CardCollageVO[]>([]);
const openLiveList = ref<CardOpenReportVo[]>([]);
const resultReportList = ref<CardOpenReportVo[]>([]);
const carmiList = ref<CarmiFormat[]>([]);
const chooseCarmiList = ref<CarmiFormat[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const reportLoading = ref(false);
const carmiLoading = ref(false);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const editUpload = ref(false);
const addUpload = ref(false);
const total = ref(0);
const reportTotal = ref(0);
const carmiTotal = ref(0);
const collageId = ref();
const videoUrl = ref();
const queryFormRef = ref<ElFormInstance>();
const activeNames = ref('1');
const viewAppendReportList = ref([]);
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const boxDialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const openLiveBack = reactive<DialogOption>({
  visible: false,
  title: ''
});

const viewOpenReport = reactive<DialogOption>({
  visible: false,
  title: ''
});

const thirdDia = reactive<DialogOption>({
  visible: false,
  title: ''
});

const viewAppendReport = reactive<DialogOption>({
  visible: false,
  title: ''
});

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    collageName: undefined,
    collageCode: undefined,
    collageModule: '',
    playWay: undefined,
    shopName: undefined,
    collageStatus: '',
    liveReportStatus: '',
    stateList: [],
  },
  reportQueryParams: {
    pageNum: 1,
    pageSize: 10,
    collageId: '',
  },
  queryCarmiParams: {
    pageNum: 1,
    pageSize: 10,
    filterInfo: '',
    collageId: '',
  },
});

const { queryParams, reportQueryParams, queryCarmiParams } = toRefs(data);

/** 查询拼团管理列表 */
const getList = async () => {
  loading.value = true;
  const res = await queryOpenCardCollageList(queryParams.value);
  cardCollageList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: CardCollageVO[]) => {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

const viewLivePlayback = async (row?: CardCollageVO) => {
  openLiveBack.visible = true
  videoUrl.value = row.liveBackPath;
}

const resetCollageLive = (row?: CardCollageVO) => {
  ElMessageBox.confirm('此操作将直播重置, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    resetLive(row?.id).then(res => {
      if (res.code === 200) {
        ElMessage.success(res.msg);
        getList();
      } else {
        ElMessage.error(res.msg);
      }
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消操作'
    });
  });
}

const endCollageLive = (row?: CardCollageVO) => {
  ElMessageBox.confirm('此操作将结束直播, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    endLive(row?.id).then(res => {
      if (res.code === 200) {
        ElMessage.success(res.msg);
        getList();
      } else {
        ElMessage.error(res.msg);
      }
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消操作'
    });
  });
}

const viewRepor = (row?: CardCollageVO) => {
  editUpload.value = false;
  addUpload.value = false;
  viewOpenReport.visible = true;
  viewOpenReport.title = '查看拆卡报告';
  reportQueryParams.value.collageId = row?.id;
  getViewOpenReport();
}

const getViewOpenReport = () => {
  reportLoading.value = true;
  viewOpenReportInfo(reportQueryParams.value).then(res => {
    if (res.code === 200) {
      openLiveList.value = res.rows;
      reportLoading.value = false;
      reportTotal.value = res.total;
    } else {
      ElMessage.error(res.msg);
    }
  });
}

const recallCarmi = (row?: CardOpenReportVo) => {

  ElMessageBox.confirm('此操作将撤销卡密, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteOpenReport(row?.id).then(res => {
      if (res.code === 200) {
        getViewOpenReport();
      } else {
        ElMessage.error(res.msg);
      }
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消操作'
    });
  });
}

const deletAppendCarmi = (row: CardOpenReportVo, index: number) => {
  ElMessageBox.confirm('此操作将删除卡密, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // debugger
    if (!row.id) {
      openLiveList.value.splice(index, 1);
    } else {
      let data = {
        type: 2,
        typeValue: 1,
        carmiId: row.carmiId,
        collageId: collageId.value
      }
      deleteImagePath(data).then(res => {
        if (res.code == 200) {
          openLiveList.value.splice(index, 1);
        } else {
          ElMessage.error(res.msg);
        }
      });
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消操作'
    });
  });

  // openLiveList.value.forEach((item, index) => {
  //   if (item.carmiId == row?.carmiId) {
  //     openLiveList.value.splice(index, 1);
  //   }
  // });
}

const openAddOn = (row?: CardCollageVO) => {
  addUpload.value = false;
  editUpload.value = true;
  viewOpenReport.visible = true;
  viewOpenReport.title = '追加拆卡报告';
  reportQueryParams.value.collageId = row?.id;
  collageId.value = row?.id;
  openLiveList.value = [];
  chooseCarmiList.value = [];
  getViewOpenReport();
}

const uploadOpenAddOn = (row?: CardCollageVO) => {
  addUpload.value = true;
  editUpload.value = false;
  viewOpenReport.visible = true;
  viewOpenReport.title = '上传拆卡报告';
  reportQueryParams.value.collageId = row?.id;
  collageId.value = row?.id;
  chooseCarmiList.value = [];
  getViewOpenReport();
}

const openThirdDia = () => {
  thirdDia.visible = true;
  chooseCarmiList.value = JSON.parse(JSON.stringify(openLiveList.value));
  // chooseCarmiList.value = openLiveList.value.filter((item: any) => {
  //   return item.reportStatus !== '1'
  // });
  console.log(chooseCarmiList.value);
  getCarmiInfo();
}

const getCarmiInfo = () => {
  carmiLoading.value = true;
  queryCarmiParams.value.collageId = collageId.value;
  console.log(queryCarmiParams.value);
  getCarmiByCollageIdInfo(queryCarmiParams.value).then(res => {
    if (res.code === 200) {
      carmiList.value = res.rows;
      carmiTotal.value = res.total;
      chooseCarmiList.value.forEach((item: any, index: number) => {
        carmiList.value.forEach((item1: any, index1: number) => {
          if (item1.id == item.id || item1.id == item.carmiId) {
            carmiList.value.splice(index1, 1);
          }
        });
      });
      let arr = []
      arr = chooseCarmiList.value.filter((item) => {
        return item.reportStatus !== '1'
      })
      // carmiTotal.value = carmiTotal.value - arr.length;
    } else {
      ElMessage.error(res.msg);
    }
  }).finally(() => {
    setTimeout(() => {
      carmiLoading.value = false;
    }, 200)
  }
  );
}

const addReportChooseCarmi = (row?: CarmiFormat) => {
  carmiList.value.forEach((item, index) => {
    if (item.id === row?.id || item.id === row?.carmiId) {
      carmiList.value.splice(index, 1);
    }
  });
  chooseCarmiList.value.push(row);
  // carmiTotal.value = carmiList.value.length;
  setTimeout(() => {
    getCarmiInfo();
  }, 200)
}

const delReportChooseCarmi = (row: CarmiFormat, index: number) => {
  let obj: any = {}
  // openLiveList.value.forEach((item, index) => {
  //   if (item.carmiId == row?.id) {
  //     // openLiveList.value.splice(index, 1);
  //     obj = item
  //   }
  // });
  obj = JSON.parse(JSON.stringify(row));
  if (obj.id && obj.carmiId) {
    let data = {
      type: 2,
      typeValue: 1,
      carmiId: obj.carmiId,
      collageId: collageId.value
    }
    deleteImagePath(data).then(res => {
      if (res.code == 200) {
        openLiveList.value.splice(index, 1);
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
  chooseCarmiList.value.splice(index, 1);
  carmiList.value.push(row);
  // carmiTotal.value = carmiList.value.length;
  getCarmiInfo();
}

function uniqueByProperty(arr, prop) {
  const unique = arr.map(e => e[prop])
    // 存储每一个属性值
    .map((e, i, final) => final.indexOf(e) === i && i)
    // 移除无效值，并且保留原数组的每一个元素
    .filter(e => arr[e])
    .map(e => arr[e]);

  return unique;
}

const successCarmi = () => {
  let arr: any = []
  let arr2 = JSON.parse(JSON.stringify(chooseCarmiList.value));
  let arr3: any = []
  arr2.forEach((item: any, index: number) => {
    let report: any = {};
    // report.isAddOn = true;
    report.cardCollageId = item.cardCollageId ? item.cardCollageId : collageId.value;
    report.carmiId = item.carmiId ? item.carmiId : item.id;
    report.carmiProperty = item.carmiProperty?item.carmiProperty:item.cardCategoryProperty;
    report.carmiInfo = item.carmiInfo;
    report.id = item.carmiId ? item.id : '';
    report.appUserId = item.appUserId ? item.appUserId : '';
    report.cardCategoryId = item.cardCategoryId ? item.cardCategoryId : '';
    report.reportStatus = item.reportStatus ? item.reportStatus : '';
    report.frontImagePath = item.frontImagePath ? item.frontImagePath : '';
    report.reverseImagePath = item.reverseImagePath ? item.reverseImagePath : '';
    report.openCardTime = item.openCardTime ? item.openCardTime : '';
    report.currentNiceCard = item.currentNiceCard ? item.currentNiceCard : '';
    report.cardOrderId = item.cardOrderId ? item.cardOrderId : '';
    report.cardOrderDetailId = item.cardOrderDetailId ? item.cardOrderDetailId : '';
    report.cardOrderNumber = item.cardOrderNumber ? item.cardOrderNumber : '';
    report.shopId = item.shopId ? item.shopId : '';
    arr3.push(report);
  });
  if (addUpload.value) {
    openLiveList.value = JSON.parse(JSON.stringify(arr3));
  }
  if (editUpload.value) {
    openLiveList.value = JSON.parse(JSON.stringify(arr3)); // uniqueByProperty([...openLiveList.value, ...arr3], 'carmiId');
  }
  // console.log(arr3);
  console.log(openLiveList.value);

  // openLiveList.value = arr3;
  thirdDia.visible = false;
}
const canclethirdDia = () => {
  thirdDia.visible = false;
  queryCarmiParams.value = {
    pageNum: 1,
    pageSize: 10,
    filterInfo: '',
    collageId: '',
  }
}
const viewReportDia = () => {
  try {
    openLiveList.value.forEach((item, index) => {
      if (item.frontImagePath == null || item.frontImagePath == '' || item.frontImagePath == undefined) {
        proxy?.$modal.msgError('请上传卡片正面图片');
        throw new Error('图片未上传'); // 抛出错误以停止循环
      }
      // 其他逻辑
    });
  } catch (error: any) {
    console.error(error.message);
    return;
  }
  let arr = []
  openLiveList.value.forEach((item, index) => {
    if (Number(item.reportStatus) !== 1) {
      arr.push(item)
    }
  });
  viewAppendReportList.value = arr;
  viewAppendReport.visible = true;
}

const addAppendOpenReport = async () => {
  try {
    openLiveList.value.forEach((item, index) => {
      if (item.frontImagePath == null || item.frontImagePath == '' || item.frontImagePath == undefined) {
        proxy?.$modal.msgError('请上传卡片正面图片');
        throw new Error('图片未上传'); // 抛出错误以停止循环
      }
      // 其他逻辑
    });
  } catch (error: any) {
    console.error(error.message);
    return;
  }
  if (addUpload.value) {
    const res = await openReportSave(collageId.value);
    if (res.code == 200) {
      viewOpenReport.visible = false;
      viewAppendReport.visible = false;
      await getList();
      // getViewOpenReport();
    } else {
      ElMessage.error(res.msg);
    }
  } else {
    const res = await appendOpenReport(openLiveList.value);
    if (res.code == 200) {
      viewOpenReport.visible = false;
      viewAppendReport.visible = false;
      await getList();
    } else {
      ElMessage.error(res.msg);
    }
  }

}

const generateReport = async () => {
  try {
    openLiveList.value.forEach((item, index) => {
      if (item.frontImagePath == null || item.frontImagePath == '' || item.frontImagePath == undefined) {
        proxy?.$modal.msgError('请上传图片');
        throw new Error('图片未上传'); // 抛出错误以停止循环
      }
      // 其他逻辑
    });
  } catch (error: any) {
    console.error(error.message);
    return;
  }
  const res = await openReportSave(collageId.value);
  if (res.code == 200) {
    viewOpenReport.visible = false;
    await getList();
  } else {
    ElMessage.error(res.msg);
  }
}
const changeRow = (row: any, bosere: any, index: number) => {
  let formData = new FormData();
  formData.append('carmiId', row.carmiId);
  formData.append('cardCollageId', collageId.value);
  if (row.carmiProperty != null && row.carmiProperty != '' && row.carmiProperty != undefined) {
    formData.append('carmiProperty', row.carmiProperty);
  }
  formData.append('carmiInfo', row.carmiInfo);
  if (bosere == 1 || bosere == 0) {
    formData.append('frontReverse', bosere);
    formData.append('file', bosere == 0 ? row.frontImagePath : row.reverseImagePath);
  }
  if (editUpload.value) {
    formData.append('currentAppend', '1');
  }
  if (row.currentNiceCard == '1') {
    formData.append('currentNiceCard', row.currentNiceCard);
  }

  addReportImagePathHandle(formData, index)
}

const addReportImagePathHandle = (formData: any, index: number) => {
  addReportImagePath(formData).then(res => {
    if (res.code == 200) {
      openLiveList.value[index].id = res.data.id;
      openLiveList.value[index].frontImagePath = res.data.frontImagePath;
      openLiveList.value[index].reverseImagePath = res.data.reverseImagePath;
      openLiveList.value[index].reportStatus = res.data.reportStatus;
      // getViewOpenReport();
    } else {

      ElMessage.error(res.msg);
    }
  }).catch(err => {
    let flag = formData.get("frontReverse")
    if (flag == '1') {
      openLiveList.value[index].reverseImagePath = ''
    }
    if (flag == '0') {
      openLiveList.value[index].frontImagePath = ''
    }
    console.log(flag);
  });
}


const changeAndDelete = (row: any, bosere: any, index: number) => {
  let data: any = {
  }
  if (bosere == 3) {
    data = {
      type: 0,
      typeValue: row.currentNiceCard,
      carmiId: row.carmiId,
      collageId: collageId.value
    }
  }
  if (bosere == 0 || bosere == 1) {
    data = {
      type: row.frontImagePath || row.reverseImagePath ? 1 : 2,
      typeValue: bosere,
      carmiId: row.carmiId,
      collageId: collageId.value
    }
  }
  deleteImagePath(data).then(res => {
    if (res.code == 200) {
      if (data.type == 2) {
        openLiveList.value.splice(index, 1);
      } else if (data.type == 1) {
        setTimeout(() => {
          openLiveList.value[index].currentNiceCard = '0'
          changeAndDelete(row, 3, index)
        }, 500);
      }
    } else {
      ElMessage.error(res.msg);
    }
  });

}


const getChangeReport = () => {
  let flag = false;
  openLiveList.value.find((item, index) => {
    if (Number(item.reportStatus) !== 1) {
      return flag = true
    }
  });
  return flag;
}


onMounted(() => {
  getList();
});
</script>
<style scoped>
.center-form-item {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 如果需要垂直居中 */
}

::v-deep(.el-divider__text) {
  font-size: 13px;
  font-weight: bold;
}
</style>
